<div class="list">
  <div class="table-container">
    <table class="table-hover" mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="select" sticky>
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox
            (change)="$event ? masterToggle() : null"
            [checked]="selection.hasValue() && isAllSelected()"
            [indeterminate]="selection.hasValue() && !isAllSelected()"
          >
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox
            (click)="$event.stopPropagation()"
            (change)="$event ? selection.toggle(row) : null"
            [checked]="selection.isSelected(row)"
          >
          </mat-checkbox>
        </td>
      </ng-container>

      <ng-container matColumnDef="star">
        <th mat-header-cell *matHeaderCellDef>star</th>
        <td mat-cell *matCellDef="let element">
          <mat-icon
            class="star"
            *ngIf="!element.starred"
            (click)="$event.stopPropagation()"
            >star_border</mat-icon
          >
          <mat-icon
            class="star active"
            *ngIf="element.starred"
            (click)="$event.stopPropagation()"
            >star</mat-icon
          >
        </td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>name</th>
        <td mat-cell *matCellDef="let element">{{ element.from.name }}</td>
      </ng-container>

      <ng-container matColumnDef="subject">
        <th mat-header-cell *matHeaderCellDef>subject</th>
        <td mat-cell *matCellDef="let element">{{ element.subject }}</td>
      </ng-container>

      <ng-container matColumnDef="when" stickyEnd>
        <th mat-header-cell *matHeaderCellDef>when</th>
        <td mat-cell *matCellDef="let element">{{ element.when }}</td>
      </ng-container>

      <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns"
        (click)="rowSelection(row)"
      ></tr>
    </table>
  </div>

  <div
    class="no-mails"
    fxLayout="column"
    fxLayoutAlign="start center"
    *ngIf="dataSource?.data.length === 0"
  >
    没有邮件
  </div>
</div>
